<template>
  <div>
    <a-row>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="path"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">
        <template slot="fileName" slot-scope="text, record, index">
          <j-ellipsis :value="text" :length="20"/>
        </template>
        <template slot="action" slot-scope="text, record">
              <a-button @click="OnPerview(record)" title="预览">预览</a-button>
              <a-button style="margin-left: 5px" @click="OnDownLoad(record)" title="下载">下载</a-button>
        </template>
      </a-table>
    </a-row>
  </div>
</template>

<script>

  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {httpAction, getAction} from '@/api/manage'
  import {validateDuplicateValue} from '@/utils/util'
  import columns from './columns'
  import {Base64} from "js-base64";

  export default {
    name: 'PerviewTableView',
    components: {},
    mixins: [JeecgListMixin],
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data() {
      return {
        columns: columns(),
        model: {},
        queryParam: {},
        confirmLoading: false,
        disableMixinCreated: true,
        url: {
          list: '/sjtb/dataCollectionTemplateVersion/versionList',
        }
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
    },
    created() {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model))
    },
    methods: {
      OnPerview(record) {
        let fileUrl = `${window._CONFIG['onlinePreviewFileURL']}/sys/common/static${record.path}`
        // let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileUrl)}`
        let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileUrl))}`
        window.open(url, '_blank')
      },
      OnDownLoad(record) {
        this.$message.success('正在下载，请稍等！')
        let url = `${window._CONFIG['domianURL']}/sys/common/static/${record.path}`
        window.open(url, '_blank')
      },
      add() {
        this.edit(this.modelDefault)
      },
      edit(record) {
        this.model = Object.assign({}, record)
        this.queryParam = {id: this.model.id, templateId: this.model.templateId}
        this.loadData(1)
        this.visible = true
      },
      submitForm() {
        const that = this
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            httpAction(httpurl, this.model, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
            })
          }

        })
      },
    }
  }
</script>
<style scoped>
  .title {
    width: 20%;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 15px;
    color: #3955a5;
  }
</style>